ARIA: aria-disabled Attribut

Der aria-disabled Zustand zeigt an, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig bedient werden kann.

Beschreibung

Das aria-disabled Attribut zeigt, wenn auf true gesetzt, an, dass das Element, auf das es gesetzt ist, und alle seine fokussierbaren Nachkommen im deaktivierten Zustand sein sollen. Diese Deklaration informiert Benutzer, die unterstützende Technologien verwenden, wie Screenreader, dass solche Elemente nicht bearbeitet oder anderweitig bedient werden sollen.

Im Gegensatz zum disabled-Boolean-Attribut von HTML, das ein Formularelement semantisch als deaktiviert kommuniziert, sein Styling ändert, um seinen Zustand widerzuspiegeln, und die gesamte Funktionalität unterdrückt, zusammen mit der Verhinderung, dass der Wert des Elements an der Formularübermittlung teilnimmt, macht aria-disabled="true" diese Elemente nur semantisch als deaktiviert bekannt. Webentwickler müssen manuell sicherstellen, dass solche Elemente ihre Funktionalität unterdrückt haben, wenn sie im deaktivierten Zustand dargestellt werden.

Wenn nativer HTML-Formularsteuerelemente deaktiviert werden müssen, müssen Entwickler das disabled-Attribut angeben, da es alle im Allgemeinen erwarteten Funktionen eines deaktivierten Steuerelements standardmäßig bietet. Es kann jedoch Fälle geben, in denen Elemente als deaktiviert dargestellt werden müssen, aber für Benutzer verfügbar bleiben sollen, um sie bei der Navigation über die Tab-Taste zu finden. Dadurch kann deren Auffindbarkeit verbessert werden, da sie nicht aus der Fokusreihenfolge der Webseite entfernt werden, da aria-disabled die Fokussierbarkeit solcher Elemente nicht ändert, noch werden die Elemente durch das Standard-Browser-Styling abgeblendet, was sie leichter lesbar macht. Einige Beispiele, bei denen dies nützlich sein kann, umfassen:

Das Header-Button-Element, das mit einem nicht kollabierbaren Akkordeon-Bereich verbunden ist,
Ein Button, der wichtig ist, in der Fokusreihenfolge der Seite zu bleiben, dessen Aktion jedoch derzeit nicht verfügbar ist - wie das Übermitteln eines Formulars,
Vorübergehend inaktive Elemente in einem Menü-Widget, die ansonsten bei der Standardtastaturnavigation übersprungen würden.

In jedem dieser Fälle möchte man Benutzern ermöglichen, diese Elemente durch Standardtastaturnavigation zu finden, obwohl die Funktionalität dieser Steuerung entfernt oder "deaktiviert" ist. Entwickler müssen dennoch JavaScript verwenden, um die Funktionalität des Elements vollständig zu deaktivieren und auch das Erscheinungsbild des Elements zu ändern, damit sehende Benutzer wissen, dass es deaktiviert ist.

Hinweis: Der Zustand des Deaktiviertseins gilt für das Element mit aria-disabled="true" und alle seine fokussierbaren Nachkommen. Seien Sie vorsichtig, wenn Sie dieses Attribut auf Containerelementen verwenden. Insbesondere in dem Fall, in dem ein Container sowohl Formularelemente als auch Links enthält - wo die Absicht sein könnte, die Formularelemente als im deaktivierten Zustand darzustellen, jedoch nicht die Links als "deaktiviert" zu kommunizieren.

Ein weiterer Grund, das aria-disabled Attribut über das HTML-disabled Attribut zu nutzen, besteht darin, wenn Sie benutzerdefinierte Steuerelemente erstellt haben, die als deaktiviert markiert werden müssen, aber kein Element verwenden, das das disabled Attribut erlaubt. Zum Beispiel in folgendem Codeausschnitt wurde ein <div> verwendet, um einen benutzerdefinierten Button zu erstellen, der als deaktiviert markiert werden muss. Das <div>-Element erwartet oder respektiert jedoch nicht das disabled-Attribut - auch wenn ihm ein role="button" zugewiesen wird, um seine exponierte ARIA-Rolle zu ändern. Das aria-disabled Attribut ist erforderlich, um solche benutzerdefinierten Steuerelemente zu deaktivieren.

html

<div role="button" aria-disabled="true" tabindex="-1">Edit</div>

Ähnlich wie JavaScript erforderlich ist, um sicherzustellen, dass ein Element mit aria-disabled="true" nicht funktionstüchtig ist, darf das Element auch Styling-Anpassungen erfordern. Im Gegensatz zum HTML-disabled-Attribut, bei dem dessen Angabe :disabled-Benutzeragenten-Stile anwendet, erfolgt bei aria-disabled="true" keine solche Anwendung. Das Element kann mit dem Attributselektor [aria-disabled="true"] gestylt werden.

css

[aria-disabled="true"] {
  opacity: 0.5;
}

Wenn Sie das aria-disabled Attribut gezielt verwenden, um ein Formularelement in der Tastaturfokus-Reihenfolge der Seite zu belassen, insbesondere wenn das Element wichtigen Inhalt darstellt, den alle Benutzer wahrnehmen können sollten, müssen Sie möglicherweise ein Styling verwenden, das dennoch die Anforderungen an den Farbkontrast erfüllt. Beispielsweise ist ein deaktivierter Button/Überschrift, der ein nicht kollabierbares Akkordeon-Panel einführt, Inhalt, der weiterhin lesbar sein muss.

css

@media (forced-colors: active) {
  [aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }
}

Die forced-colors Media Query erkennt, ob der Benutzeragent einen erzwungenen Farbmodus aktiviert hat; in diesem Fall werden sowohl die Text- als auch die Umrandungsfarben auf die Systemfarbe greyText gesetzt.

Ein weiteres Detail, das zu beachten ist, wenn aria-disabled gegenüber dem nativen HTML-Attribut verwendet wird, ist, dass das ARIA-Attribut das manuelle Styling erfordert, das notwendig ist, um das Element in Windows High Contrast Mode visuell als deaktiviert zu kommunizieren.

Hinweis: Wenn Sie CSS's pointer-events: none; verwenden, um ein Element unanklickbar zu machen, stellen Sie sicher, dass Sie die Interaktivität auch mit JavaScript deaktivieren. pointer-events: none; verhindert Mausklicks, verhindert jedoch nicht, dass das Element über die Tastatur aktiviert wird.

function onClick(event) {
  event.preventDefault();
}

function toggleDisabled(element, status, update) {
  if (status) {
    // element.input.disabled = false;
    element.setAttribute("aria-disabled", "false");
    update.textContent = "The element is now enabled.";
    element.addEventListener("click", onClick);
  } else {
    // element.input.disabled = true;
    element.setAttribute("aria-disabled", "true");
    update.textContent = "The element is now disabled.";
    element.removeEventListener("click", onClick);
  }
}

Beim Umschalten von aria-disabled="true" auf "false", verwenden Sie JavaScript, um:

Den Wert auf false zu setzen (oder das Attribut vollständig zu entfernen),
Das Element zu aktivieren, und
Den Benutzer darüber zu informieren, dass die Steuerung nun aktiviert ist.

Wenn Sie nur CSS verwendet haben, um den deaktivierten Zustand mit einem Attributselektor zu gestalten, wird der Selektor nicht mehr übereinstimmen und das deaktivierte Styling wird nicht mehr wirksam sein.

Werte

true: Das Element ist deaktiviert
false: Das Element ist nicht deaktiviert

Zugehörige Schnittstellen

Element.ariaDisabled: Die ariaDisabled Eigenschaft, Teil der Element Schnittstelle, spiegelt den Wert des aria-disabled Attributs wider und zeigt an, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitet oder anderweitig bedient werden kann.
ElementInternals.ariaDisabled: Die ariaDisabled Eigenschaft der ElementInternals Schnittstelle spiegelt den Wert des aria-disabled Attributs wider.

Zugehörige Rollen

Verwendet in Rollen:

Geerbt in Rollen:

Spezifikationen

Specification
Accessible Rich Internet Applications (WAI-ARIA) # aria-disabled